import React from 'react'

const Ems = () =>
{
    // 设置状态
    const [LoginUser,setLoginUser] = React.useState(React.$LoginUser)
    const [msg,setMsg] = React.useState('发送验证码')
    const [disabled,setDisabled] = React.useState(false)

    // 钩子函数
    React.useEffect(() => {
        let LoginUser = React.$Cookie.load('LoginUser') ? React.$Cookie.load('LoginUser') : {}

        setLoginUser(LoginUser)
    },[])

    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    const [form] = React.$Vant.Form.useForm()

    const onSend = async () =>
    {
        let data = {
            id:LoginUser.id,
            email:LoginUser.email
        }
        console.log(data)
        let result = await React.$Api.sendems(data)

        if(result.code === 1)
        {
            React.$Vant.Notify.show({
                type:'success',
                message:result.msg
            })
        }else{
            React.$Vant.Notify.show({
                type:'warning',
                message:result.msg
            })
            return false
        }

        let sec = 60

        let T = setInterval(() => {
            setMsg(`${sec} s`)

            setDisabled(true)

            if(sec <= 0)
            {
                clearInterval(T)

                sec = 60

                setDisabled(false)

                setMsg('重新发送验证码')

                return false
            }else{
                sec--
            }
        }, 1000);
    }

    const onEms = async (form) =>
    {
        let data = {
            id:LoginUser.id,
            code:form.code
        }

        // 发起请求
        let result = await React.$Api.checkems(data)

        if(result.code === 1)
        {
            React.$Vant.Notify.show({
                type:'success',
                message:result.msg,
                onClose:() => {

                    React.$Cookie.save('LoginUser',result.data)

                    navigate('/user/base/index')
                }
            })

            return false
        }else{
            React.$Vant.Notify.show({
                type:'warning',
                message:result.msg
            })

            return false
        }
    }

    const onBack = () =>
    {
        navigate(-1)
    }

    // 头像
    const Avatar = () =>
    {
        if(LoginUser.avatar)
        {
            return (
                <img id="Dfgrg" style={{ height: '1.1rem' }} src={LoginUser.avatar_text} alt="" />
            )
        }else{
            return (
                <img id="Dfgrg" style={{ height: '1.1rem' }} src="/assets/images/toux.jpg" alt="" />
            )
        }
    }

    return (
        <>
            <div className='my_kuang'>
                {/* 导航栏 */}
                <React.$Vant.Sticky>
                    <React.$Vant.NavBar 
                        title='邮箱认证'
                        onClickLeft={onBack}
                    />
                </React.$Vant.Sticky>

                {/* 头像 */}
                <div className="bj_img">
                    <img className="beij_s" src="/assets/images/my_beij.jpg" alt="" />
                    <div className="nimetou_gaib">
                        <div className="toux_hou">
                            <img id="Dfgrg" style={{ height: '1.1rem' }} src={LoginUser.avatar ? LoginUser.avatar_text : '/assets/images/toux.jpg' } alt="" />
                        </div>
                    </div>
                </div>

                {/* 内容 */}
                <div className='ems'>
                    <React.$Vant.Form form={form} onFinish={onEms}>
                        {/* 邮箱 */}
                        <React.$Vant.Form.Item
                            labelWidth='3.5em'
                            labelAlign='right'
                            name='email'
                            label='邮箱'
                            initialValue={LoginUser.email || ''}
                            colon
                        >
                            <React.$Vant.Input placeholder='请输入邮箱' disabled />
                        </React.$Vant.Form.Item>

                        {/* 验证码 */}
                        <React.$Vant.Form.Item
                            labelWidth='3.5em'
                            labelAlign='right'
                            name='code'
                            label='验证码'
                            colon
                        >
                            <React.$Vant.Input
                                placeholder='请输入验证码'
                                suffix={
                                    <React.$Vant.Button size='small' type='primary' disabled={disabled} onClick={onSend}>{msg}</React.$Vant.Button>
                                }
                            />
                        </React.$Vant.Form.Item>

                        {/* 提交 */}
                        <div style={{width:'80%',margin:'20px auto'}}>
                            <React.$Vant.Button nativeType='submit' round block type='primary'>提交</React.$Vant.Button>
                        </div>
                    </React.$Vant.Form>
                </div>

            </div>
        </>
    )
}

export default Ems